<template>
  <div class="refine_userlist">
    <h2 class="titleblue">CCTV列表</h2>
    <div class="contant">
      <data-table :page='currentPage' :head="thead" :data="tableData"></data-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper"
        :total="dataCount"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import cctvSiteService from '@/services/CctvSiteService'

  export default {
      components: {
        'data-table': DataTable
      },
      data: function () {
        return {
          thead: [
            {name: '中文名称', prop: 'cnName'},
            {name: '所属海事机构', prop: 'orgName'},
            {name: '业主单位名称', prop: 'ownerUnitName'},
            {name: '位置', prop: 'position'},
            {name: '类型', prop: 'probeType'},
            {name: '备注', prop: 'remark'},
          ],
          tableData: [],
          currentPage: 1,
          currentPages: 1,
          dataCount: 0
        }
      },
      created () {
        this.getAll();
      },methods: {
        async getAll () {
          let resp = await cctvSiteService.searchData(this.currentPage-1)
          this.dataCount = resp.dataCount
          this.tableData = resp.data
        },
      handleCurrentChange (val) {
        this.currentPage = val
        this.getAll()
      },
      }
    }
</script>

<style lang='scss'>
  .refine_userlist {
    width: 100%;
    display: inline-block;

    .inlanselect {
      float: left;
      margin-right: 10px;
    }

    .el-tabs {
      width: 100%;
      margin-top: 20px;
      display: inline-block;
    }

    .el-table tr:nth-child(2n) {
      background: #FAFAFA
    }

    .table {
      margin-top: 20px;
    }

    .user-title {
      width: 100%;
      display: inline-block;
    }
  }
</style>
